<template>
	<view class="p-50 p-t-30 left">
		<view class="left title">
			<text class="ts-40 tb wa left">
				<text class="tc-green">切换车辆</text>
			</text>
			<br>
			<text class="ts-24 wa left m-t-5">
				<text class="tc-gray">选择你创建的车辆</text>
			</text>
			<view class="title-icon" @click="switchCar()">完成</view>
		</view>
		<view class="form-band psr" :class="active===item.id ? 'active' : ''" v-for="(item, index) in carsList"
			:key="index" @click="selectCarType(item)">
			<text class="tc-green tb ts-38 col-1 left m-b-10">{{item.brand || ''}}</text>
			<text class="tc-gray ts-26 col-1 left m-b-10">{{ item.model || '' }} {{ item.model ? '|' : '' }} {{item.vehicle_layout || ''}}</text>
			<text class="tc-gray ts-26 col-1 left">如何添加绑定君能锂电池</text>
			<image :src="`https://junext.co/assets/addons/xylease/imgs/${item.vehicle_type}.png`"></image>
			<image class="psa edit" src="/static/img/me/edit.svg" @click.stop="editCar(item)"></image>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				carsList: [],
				carsType: {},
				submitDisabled: false,
				latitude: 39.909,
				longitude: 116.39742,
				accountInfo: {
					id: 0,
					realname: '',
					mobile: '',
					type: '',
					accountname: '',
					accountno: ''
				},
				active: ''
			}
		},
		computed: {
			...mapState(['common'])
		},
		onLoad() {
			this.$xyfun.setNavBar(' ');
			this.$api.get({
				url: '/car/car/getVehicleTypeList',
				success: res => {
					this.carsType = res
				}
			});
			this.$api.get({
				url: '/car/car/getCarlist',
				data: {},
				success: res => {
					this.carsList = res
					this.active = this.common.car_id
				}
			});
		},
		methods: {
			editCar(item) {
				uni.navigateTo({
					url: '/pages/electric/add?id='+item.id
				})
			},
			selectCarType(item) {
				this.active = item.id;
			},
			switchCar() {
				this.$store.dispatch('common/switchCar', this.active);
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index?id='+this.active
					})
				}, 0)
			}
		}
	}
</script>

<style scoped lang="scss">
	.title {
		width: 650rpx;
		position: relative;

		.title-icon {
			position: absolute;
			width: 120rpx;
			height: 60rpx;
			border-radius: 30rpx;
			top: 15rpx;
			right: 0rpx;
			color: white;
			background-color: rgba(0, 86, 80, 1);
			text-align: center;
			line-height: 57rpx;
		}
	}

	.form-band {
		width: 570rpx;
		margin-top: 35rpx;
		padding: 40rpx 40rpx 20rpx;
		border-radius: 15rpx;
		background-color: white;
		border: 1rpx solid rgba(111, 111, 111, 0.31);
		position: relative;
		float: left;

		.form-band-icon {
			position: absolute;
			top: 52rpx;
			right: 50rpx;
			width: 65rpx;
			height: 65rpx;
			border-radius: 65rpx;
		}
		.edit {
			width: 40rpx;
			height: 40rpx;
			top: 50rpx;
			right: 50rpx;
		}
	}

	.active {
		border: 1rpx solid rgba(0, 86, 80, 1);
	}
</style>